﻿
@{
    Layout = "";
    Html.AddScriptParts("~/Scripts/jquery.carouFredSel-6.2.1-packed.js");
}
@model IList<ProductOverviewModel>
@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
    <div class="block">
        <div class="title">
            @T("Sản phẩm mới")
        </div>
        <div class="clear">
        </div>
        <ul id="jcarouseSlide">
            @foreach (var item in Model)
            {
                <li class="item-box">
                    <div class="picture">
                        <a href="@Url.RouteUrl("Product", new { SeName = item.SeName })" title="@item.DefaultPictureModel.Title">
                            <img alt="@item.DefaultPictureModel.AlternateText" src="@item.DefaultPictureModel.ImageUrl" title="@item.DefaultPictureModel.Title" />
                        </a>
                    </div>
                    <h2 class="product-title">
                        <a href="@Url.RouteUrl("Product", new { SeName = item.SeName })">@item.Name</a>
                    </h2>
                     <div class="add-info">
                        <div class="prices">
                            <div class="product-price">
                                <span class="price">@item.ProductPrice.Price</span>
                            </div>
                        </div>
                     </div>
                </li>
            }
       </ul>
    </div>
}

<script>
	$(function() {
	    $('#jcarouseSlide').carouFredSel({
			width: 190,
			height: 220,
			auto: true
		});
	});
</script>
<style>
    ul#jcarouseSlide {
            list-style:none;
        }
    ul#jcarouseSlide li {
         float:left;
         width:180px;
         background:none;
         text-align:center;
         padding-left:0;
    }
    #jcarouseSlide li .picture {
        text-align:center;
        height:140px;
    }
    #jcarouseSlide .product-title a {
        font-size:14px;
        color:blue;
        padding-top:20px;
        display:block;
    }

    #jcarouseSlide .product-price a {
        font-size:14px;
        color:#B80709;
        padding-top:20px;
        display:block;
        font-weight:bold;
    }
</style>